<template>
  <a-tabs
    class="page-tabs"
    v-model:activeKey="activePaneKey"
    type="editable-card"
    :tabBarStyle="{ margin: 0 }"
    size="small"
    hideAdd
    @edit="onPaneEdit"
    @change="onPaneChanged"
  >
    <a-tab-pane
      v-for="pane in filteredPanes"
      :key="pane.key"
      :tab="pane.title"
      :closable="pane.closable"
    >
    </a-tab-pane>
  </a-tabs>
</template>

<script setup lang="ts">
import usePageTabs from "@/composable/pagetabs";
import { computed } from 'vue';

const props = defineProps({
  excludeNames: {
    type: Array,
    default: []
  }
});
const { activePaneKey, panes, onPaneChanged, onPaneEdit } = usePageTabs();

const filteredPanes = computed(() => {
  return panes.filter(p => props.excludeNames.indexOf(p.title) < 0)
})
</script>

<style scoped>
.page-tabs {
  background-color: white;
}
</style>
